<template>
  <div class="out-line" :style="{ height: height + 'px' }">
    <div class="top-left-h"></div>
    <div class="top-left-v"></div>
    <div class="top-right-h"></div>
    <div class="top-right-v"></div>
    <div class="bottom-left-h"></div>
    <div class="bottom-left-v"></div>
    <div class="bottom-right-h"></div>
    <div class="bottom-right-v"></div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    height: {
      type: Number,
      default: 200 // 默认高度为200px，可以根据需要进行修改
    }
  }
}
</script>

<style lang="less" scoped>
.out-line {
  width: 100%;
  // height: 419px;
  background: rgba(6,7,107,0.2);
  border: 2px solid rgba(55,85,218,0.3);
  display: inline-block;
  padding: 10px;
  box-shadow: inset 0 0 16px #02246C;
  position: relative;
}

.top-left-h,
.top-left-v,
.top-right-h,
.top-right-v,
.bottom-left-h,
.bottom-left-v,
.bottom-right-h,
.bottom-right-v {
  position: absolute;
  background-color: #00a2ff;
}

.top-left-h,
.top-right-h,
.bottom-left-h,
.bottom-right-h {
  height: 1px;
  width: 40px;
}

.top-left-v,
.top-right-v,
.bottom-left-v,
.bottom-right-v {
  width: 1px;
  height: 40px;
}

.top-left-h {
  top: 0;
  left: 0;
}

.top-left-v {
  top: 0;
  left: 0;
}

.top-right-h {
  top: 0;
  right: 0;
}

.top-right-v {
  top: 0;
  right: 0;
}

.bottom-left-h {
  bottom: 0;
  left: 0;
}

.bottom-left-v {
  bottom: 0;
  left: 0;
}

.bottom-right-h {
  bottom: 0;
  right: 0;
}

.bottom-right-v {
  bottom: 0;
  right: 0;
}
</style>
